<template>
    <a-modal v-model:open="editOpen" :record="record" title="修改用户" :confirm-loading="confirmLoading" @ok="handleOk">
        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
            @finish="onFinish" @finishFailed="onFinishFailed">

            <a-alert v-if="success == true" message="Success" description="用户修改成功" type="success" show-icon closable
                @close="onClose" />
            <a-alert v-if="error == true" message="Error" description="该学号已存在" type="error" show-icon closable
                @close="onClose" />
            
            <a-form-item label="用户名" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
                <a-input v-model:value="formState.username" :defaultValue="record.username" placeholder="record.username" />
            </a-form-item>

            <a-form-item label="密码" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
                <a-input-password v-model:value="formState.password" :defaultValue="record.password" placeholder="record.password" />
            </a-form-item>
            <!-- 学号唯一 -->
            <a-form-item label="学号" name="code" :rules="[{ required: true, message: 'Please input your code!' }]">
                <a-input v-model:value="formState.code" :key="DefaultValue" disabled="true"/>
            </a-form-item>

            <a-form-item label="邮箱" name="email" :rules="[{ required: true, message: 'Please input your email!' }]">
                <a-input v-model:value="formState.email" :defaultValue="record.email" placeholder=record.email />
            </a-form-item>

            <a-form-item label="头像" name="avatar" :rules="[{ required: true, message: 'Please input your avatar!' }]">
                <a-input v-model:value="formState.avatar" :defaultValue="record.avatar" />
            </a-form-item>

        </a-form>
    </a-modal>
</template>

<!-- 修改用户 -->
<script setup>
import { axios } from '@/axios';
import { ref, reactive, watch, watchEffect, inject } from 'vue';
//console.log('edit-user')
//const formRef = ref();

let editOpen = ref(false);
const confirmLoading = ref(false);

const formState = reactive({
    id: '',
    username: '',
    password: '',
    code: '',
    email: '',
    avatar: '',
    //remember: true,
});

const update = inject('Call_Get_list')

const handleOk = async e => {
    // 异步
    // confirmLoading.value = true;
    // setTimeout(() => {
    //     open.value = false;
    //     confirmLoading.value = false;
    // }, 2000);

    let newRecord = {
        id: record.id, // id 不变
        userName: formState.username,
        password: formState.password,
        code: formState.code,
        email: formState.email,
        avatar: formState.avatar
    }
    //console.log("handleOk");
    editOpen.value = false;
    await axios.post("/api/user/SaveUser", newRecord);
    update();
    //console.log("update")
};

const onFinish = values => {
    console.log('Success:', values);
};

const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};

// 父组件通过 props 向下传递数据给子组件；
// emit 用来触发父组件里面绑定的函数并可以传参回父组件

//
const props = defineProps({
    editOpen: true,
    record: ({
        id: '',
        username: '',
        password: '',
        code: '',
        email: '',
        avatar: '',
    })
});

// let open = ref(false);
let record = ref({
    id: '',
    username: '',
    password: '',
    code: '',
    email: '',
    avatar: '',
})

let DefaultValue = record.code;

// 
watchEffect(async () => {
    editOpen.value = props.editOpen
    record.value = props.record
    Object.assign(record, props.record)
    console.log(editOpen)
    console.log(JSON.stringify(editOpen))
    //console.log("record" + JSON.stringify(record));
    //console.log(props.record);
});
// console.log(editOpen);
// 定义 调用
const emits = defineEmits(['update:editOpen']) // 提交
emits("update:editOpen", editOpen);

// watch监控editOpen
watch(async () => {
    console.log(editOpen)
})

</script>

<style lang="less">
@import "@/assets/word-like.less";
@import "@/assets/paper.less";

#user-manager {
    width: 1000px;
    margin: 60px auto;

    .page-div {
        padding: 60px 10px;
    }

    .sample {
        background: #fff;
        padding: 10px;

        .data-table {
            margin-bottom: 10px;

            td {
                border: none;
            }
        }
    }
}
</style>